<template>
  <div>
    <CloudTreeSelect
      show-search
      style="width: 300px"
      :value="value"
      :treeData="treeData"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="Please select"
      allow-clear
      multiple
      tree-default-expand-all
      @change="onChange"
      @search="onSearch"
      @select="onSelect"
    >
    </CloudTreeSelect>
  </div>
</template>

<script>
  export default {
    title: '2.多选 ',
    subTitle: '多选的树选择。',
    data () {
      return {
        value: undefined,
        treeData: [{
          title: 123,
          key: 123,
          isParent: true,
          children: [{
            title: 456,
            key: 456
          }, {
            title: 789,
            key: 789
          }, {
            title: 111,
            key: 111
          }, {
            title: 222,
            key: 222
          }, {
            title: 333,
            key: 333
          }]
        }],
      }
    },
    methods: {
      onChange (value) {
        console.log(value);
        this.value = value;
      },
      onSearch () {
        console.log(...arguments);
      },
      onSelect () {
        console.log(...arguments);
      },
    }
  }
</script>

<style lang="scss">
</style>